"use client"

import React from 'react';

interface Course {
  lesson_number: string
  course_name: string
  target_char: string
}

interface WelcomeScreenProps {
  onStart: () => void;
  currentCourse?: Course
}

export default function WelcomeScreen({ onStart, currentCourse }: WelcomeScreenProps) {
  return (
    <div className="flex flex-col items-center justify-center h-full relative overflow-hidden">
      {/* 背景装饰元素 */}
      <div className="absolute inset-0 opacity-20">
        <div className="absolute w-72 h-72 bg-gradient-to-r from-purple-300 to-pink-300 rounded-full blur-3xl animate-pulse top-10 left-10"></div>
        <div className="absolute w-96 h-96 bg-gradient-to-r from-blue-300 to-cyan-300 rounded-full blur-3xl animate-pulse bottom-10 right-10"></div>
        <div className="absolute w-48 h-48 bg-gradient-to-r from-yellow-300 to-orange-300 rounded-full blur-3xl animate-pulse top-1/3 right-1/4"></div>
      </div>

      {/* 主要内容区域 */}
      <div className="relative z-10 text-center space-y-12">
        {/* 三本书的层叠效果 - 放大并增强效果 */}
        <div className="relative mb-16 transform hover:scale-110 transition-transform duration-500">
          {/* 第三本书 (最底层) - 增大尺寸 */}
          <div className="absolute -rotate-12 w-48 h-60 bg-gradient-to-br from-green-400 via-green-500 to-green-600 rounded-2xl shadow-[0_20px_50px_rgba(0,0,0,0.5)] transform translate-x-12 translate-y-3 animate-pulse"></div>
          
          {/* 第二本书 (中间层) - 增大尺寸 */}
          <div className="absolute rotate-6 w-48 h-60 bg-gradient-to-br from-blue-400 via-blue-500 to-blue-600 rounded-2xl shadow-[0_15px_30px_rgba(0,0,0,0.5)] transform translate-x-6 translate-y-1.5 animate-pulse" style={{animationDelay: '0.5s'}}></div>
          
          {/* 第一本书 (最上层) - 增大尺寸 */}
          <div className="relative w-48 h-60 bg-gradient-to-br from-red-400 via-red-500 to-red-600 rounded-2xl shadow-[0_10px_25px_rgba(0,0,0,0.5)] animate-pulse" style={{animationDelay: '1s'}}></div>
          
          {/* 书本上的装饰光效 */}
          <div className="absolute inset-0 bg-gradient-to-t from-transparent via-white/20 to-white/40 rounded-2xl animate-pulse"></div>
        </div>

        {/* 标题 - 增大字体和增强效果 */}
        <div className="space-y-6">
          <h1 className="text-7xl font-black bg-gradient-to-r from-purple-600 via-purple-700 to-blue-600 bg-clip-text text-transparent mb-6 tracking-tight transform hover:scale-105 transition-transform duration-300">
            岚小字识字
          </h1>
          
          {/* 装饰线条 */}
          <div className="flex items-center justify-center space-x-4 mb-8">
            <div className="w-16 h-1 bg-gradient-to-r from-transparent via-purple-400 to-transparent rounded-full"></div>
            <div className="w-3 h-3 bg-purple-400 rounded-full animate-ping"></div>
            <div className="w-16 h-1 bg-gradient-to-r from-transparent via-purple-400 to-transparent rounded-full"></div>
          </div>
          
          <p className="text-2xl text-gray-600 font-medium tracking-wide mb-12">
            让汉字学习变得简单有趣
          </p>
        </div>

        {/* 开始按钮 - 增大并增强效果 */}
        <button
          onClick={onStart}
          className="group relative px-16 py-6 text-2xl bg-gradient-to-r from-purple-600 via-purple-700 to-purple-800 text-white rounded-3xl font-bold shadow-2xl hover:shadow-3xl transition-all duration-500 hover:transform hover:-translate-y-3 hover:scale-110 tracking-wide overflow-hidden border-2 border-purple-400/30"
        >
          {/* 按钮内部光效 */}
          <div className="absolute inset-0 bg-gradient-to-r from-purple-400 to-purple-500 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl"></div>
          
          {/* 按钮文字 */}
          <span className="relative z-10 flex items-center justify-center gap-4">
            <span className="text-3xl group-hover:animate-bounce">🚀</span>
            <span>开始教学</span>
            <span className="text-3xl group-hover:animate-bounce" style={{animationDelay: '0.2s'}}>✨</span>
          </span>
          
          {/* 按钮外围光效 */}
          <div className="absolute -inset-2 rounded-3xl bg-gradient-to-r from-purple-400 via-purple-500 to-purple-600 opacity-0 group-hover:opacity-30 blur-xl transition-opacity duration-500"></div>
          
          {/* 按钮边框动画 */}
          <div className="absolute inset-0 rounded-3xl border-2 border-white/20 group-hover:border-white/40 transition-colors duration-300"></div>
        </button>

        {/* 底部装饰点 */}
        <div className="flex justify-center space-x-3 mt-12">
          <div className="w-4 h-4 bg-purple-400 rounded-full animate-bounce"></div>
          <div className="w-4 h-4 bg-purple-500 rounded-full animate-bounce" style={{animationDelay: '0.2s'}}></div>
          <div className="w-4 h-4 bg-purple-600 rounded-full animate-bounce" style={{animationDelay: '0.4s'}}></div>
        </div>
      </div>

      {/* 浮动装饰元素 */}
      <div className="absolute top-20 left-20 text-4xl animate-bounce opacity-60">📚</div>
      <div className="absolute top-32 right-24 text-3xl animate-bounce opacity-60" style={{animationDelay: '1s'}}>✏️</div>
      <div className="absolute bottom-32 left-32 text-3xl animate-bounce opacity-60" style={{animationDelay: '2s'}}>🎯</div>
      <div className="absolute bottom-20 right-20 text-4xl animate-bounce opacity-60" style={{animationDelay: '1.5s'}}>🌟</div>
    </div>
  );
} 